<div class="layui-form-item">
    <label class="layui-form-label">底部颜色</label>
    <div class="layui-input-block">
        <input type="color" name="tabBar_background" style="width: 38px;height: 38px;line-height: 38px;border: none;" value="#ffffff" />
    </div>
</div>
<div class="clear"></div>

<div class="layui-form-item">
    <label class="layui-form-label">字体颜色</label>
    <div class="layui-input-block">
        <input type="color" name="tabBar_color" style="width: 38px;height: 38px;line-height: 38px;border: none;" value="#999999" />
    </div>
</div>
<div class="clear"></div>

<div class="layui-form-item">
        <label class="layui-form-label">图标数量</label>
        <div class="layui-input-block">
            <select name="tabBar_num">
                <option value="50%">2</option>
                <option value="33%">3</option>
                <option value="25%" selected>4</option>
                <option value="20%">5</option>
            </select>
        </div>
    </div>
<div class="clear"></div>

<div class="layui-form-item tabBar">
    <label class="layui-form-label">图标1</label>
    <div class="layui-input-block">
        <select name="tabBar_iconPath1" id="" class="tabBar_iconPath" data="0" style="margin-right: 45px;">
            <option value="" selected>未选择</option>
            <option value="images/icon/home.png,images/icon/home_fill.png">首页</option>
            <option value="images/icon/company.png,images/icon/company_fill.png">羽毛球</option>
            <option value="images/icon/information.png,images/icon/information_fill.png">文章图标</option>
            <option value="images/icon/relation.png,images/icon/relation_fill.png">联系我们</option>
        </select>
        地址1
        <select name="tabBar_text1" class="tabBar_text" data="0" id="" style="margin-left: 45px;">
            <option value="" selected>未选择</option>
            <option value="pages/index/index,首页">首页</option>
            <option value="pages/lists/lists,列表">列表</option>
            <option value="pages/detail/detail,详情">详情</option>
            <option value="pages/contact/contact,联系我们">联系我们</option>
            <option value="pages/about/about,关于我们">关于我们</option>
        </select>
        <!-- <input type="text"  data="0" name="tabBar_text1" lay-verify="required" placeholder="" autocomplete="off" class="layui-input tabBar_text" style="width: 100%;"> -->
    </div>
</div>
<div class="clear"></div>

<div class="layui-form-item tabBar">
    <label class="layui-form-label">图标2</label>
    <div class="layui-input-block">
        <select name="tabBar_iconPath2" id="" class="tabBar_iconPath" data="1" style="margin-right: 45px;">
            <option value="" selected>未选择</option>
            <option value="images/icon/home.png,images/icon/home_fill.png">首页</option>
            <option value="images/icon/company.png,images/icon/company_fill.png">羽毛球</option>
            <option value="images/icon/information.png,images/icon/information_fill.png">文章图标</option>
            <option value="images/icon/relation.png,images/icon/relation_fill.png">联系我们</option>
        </select>
        地址2
        <select name="tabBar_text2" class="tabBar_text" data="1" id="" style="margin-left: 45px;">
            <option value="" selected>未选择</option>
            <option value="pages/index/index,首页">首页</option>
            <option value="pages/lists/lists,列表">列表</option>
            <option value="pages/detail/detail,详情">详情</option>
            <option value="pages/contact/contact,联系我们">联系我们</option>
            <option value="pages/about/about,关于我们">关于我们</option>
        </select>
        <!-- <input type="text" data="1" name="tabBar_text2" lay-verify="required" placeholder="" autocomplete="off" class="layui-input tabBar_text" style="width: 100%;"> -->
    </div>
</div>
<div class="clear"></div>

<div class="layui-form-item tabBar">
    <label class="layui-form-label">图标3</label>
    <div class="layui-input-block">
        <select name="tabBar_iconPath3" id="" class="tabBar_iconPath" data="2" style="margin-right: 45px;">
            <option value="" selected>未选择</option>
            <option value="images/icon/home.png,images/icon/home_fill.png">首页</option>
            <option value="images/icon/company.png,images/icon/company_fill.png">羽毛球</option>
            <option value="images/icon/information.png,images/icon/information_fill.png">文章图标</option>
            <option value="images/icon/relation.png,images/icon/relation_fill.png">联系我们</option>
        </select>
        地址3
        <select name="tabBar_text3" class="tabBar_text" data="2" id="" style="margin-left: 45px;">
            <option value="" selected>未选择</option>
            <option value="pages/index/index,首页">首页</option>
            <option value="pages/lists/lists,列表">列表</option>
            <option value="pages/detail/detail,详情">详情</option>
            <option value="pages/contact/contact,联系我们">联系我们</option>
            <option value="pages/about/about,关于我们">关于我们</option>
        </select>
        <!-- <input type="text" data="2" name="tabBar_text3" lay-verify="required" placeholder="" autocomplete="off" class="layui-input tabBar_text" style="width: 100%;"> -->
    </div>
</div>
<div class="clear"></div>

<div class="layui-form-item tabBar">
    <label class="layui-form-label">图标4</label>
    <div class="layui-input-block">
        <select name="tabBar_iconPath4" id="" class="tabBar_iconPath" data="3" style="margin-right: 45px;">
            <option value="" selected>未选择</option>
            <option value="images/icon/home.png,images/icon/home_fill.png">首页</option>
            <option value="images/icon/company.png,images/icon/company_fill.png">羽毛球</option>
            <option value="images/icon/information.png,images/icon/information_fill.png">文章图标</option>
            <option value="images/icon/relation.png,images/icon/relation_fill.png">联系我们</option>
        </select>
        地址4
        <select name="tabBar_text4" class="tabBar_text" data="3" id="" style="margin-left: 45px;">
            <option value="" selected>未选择</option>
            <option value="pages/index/index,首页">首页</option>
            <option value="pages/lists/lists,列表">列表</option>
            <option value="pages/detail/detail,详情">详情</option>
            <option value="pages/contact/contact,联系我们">联系我们</option>
            <option value="pages/about/about,关于我们">关于我们</option>
        </select>
        <!-- <input type="text" data="3" name="tabBar_text4" lay-verify="required" placeholder="" autocomplete="off" class="layui-input tabBar_text" style="width: 100%;"> -->
    </div>
</div>
<div class="clear"></div>

<div class="layui-form-item tabBar" style="display: none">
    <label class="layui-form-label">图标5</label>
    <div class="layui-input-block">
        <select name="tabBar_iconPath5" id="" class="tabBar_iconPath" data="4" style="margin-right: 45px;">
            <option value="" selected>未选择</option>
            <option value="images/icon/home.png,images/icon/home_fill.png">首页</option>
            <option value="images/icon/company.png,images/icon/company_fill.png">羽毛球</option>
            <option value="images/icon/information.png,images/icon/information_fill.png">文章图标</option>
            <option value="images/icon/relation.png,images/icon/relation_fill.png">联系我们</option>
        </select>
        地址5
        <select name="tabBar_text5" class="tabBar_text" data="4" id="" style="margin-left: 45px;">
            <option value="" selected>未选择</option>
            <option value="pages/index/index,首页">首页</option>
            <option value="pages/lists/lists,列表">列表</option>
            <option value="pages/detail/detail,详情">详情</option>
            <option value="pages/contact/contact,联系我们">联系我们</option>
            <option value="pages/about/about,关于我们">关于我们</option>
        </select>
        <!-- <input type="text" data="4" name="tabBar_text5" lay-verify="required" placeholder="" autocomplete="off" class="layui-input tabBar_text" style="width: 100%;"> -->
    </div>
</div>
<div class="clear"></div>

<script type="text/javascript">
    $('input[name=tabBar_color]').on('change',function(){
        $('.bottom_01').eq(1).css('color',$(this).val())
        $('.bottom_01').eq(2).css('color',$(this).val())
        $('.bottom_01').eq(3).css('color',$(this).val())
        $('.bottom_01').eq(4).css('color',$(this).val())
    });

    $('input[name=tabBar_background]').on('change',function(){
        $('.wx_bottom').css('background-color',$(this).val());
    })

    $('.tabBar_iconPath').on('change',function(){
        var a = $(this).attr('data');
        var str = $(this).find("option:selected").attr('value').split(',');
        $('.bottom_01').eq(a).find('img').attr('src','__PUBLIC__/web/'+str[0]);
    });	

    $('.tabBar_text').on('change',function(){
        var b = $(this).attr('data');
        $('.bottom_01').eq(b).find('span').html($(this).find("option:selected").html());
    });

    $('select[name=tabBar_num]').on('change',function(){
        var c = $('.bottom_01:visible').length;
        var d = $(this).find("option:selected").html();
        if( c > d ){
            var e = c - d;
            for(var i=0;i<e;i++){
                $('.bottom_01:visible').eq(c-i-1).hide();
                $('.tabBar:visible').eq(c-i-1).hide().siblings('.clear').hide();
            }
        }else if(c < d){
            var f = d - c;
            for(var j=0;j<f;j++){
                $('.bottom_01:hidden').eq(0).show();
                $('.tabBar:hidden').eq(0).show().siblings('.clear').show();
            }
        }
        $('.bottom_01').css('width',$(this).val());
    })
</script>